<template>
    <div class="instructorNft">
        <div class="title-what">
            <h1>什么是数字藏品</h1>
            <div class="pre">
                数字藏品是使用区块链技术进行唯一标识的经数字化的特定作品、艺术品和商品，包括但不限于数字画作、图片、音乐、视频、3D模型等各种形式。数字藏品为虚拟数字商品，而非实物，一经售出，不支持退换。每个数字藏品都映射着特定区块链上的唯一序列号，不可篡改、不可分割，也不能互相替代。每一个数字藏品都代表特定作品、艺术品和商品或其限量发售的单个数字复制品，记录着其不可篡改的链上权利。数字藏品有特定作品、艺术品和商品的实际价值做支撑，不具备支付功能等任何货币属性。
            </div>
        </div>
        <div class="body">
            <div class="title">数字藏品的特点</div>
            <div class="ul">
                <div class="li">
                    <h1>唯一性</h1>
                    <div class="text">每个数字藏品都是独一无二的，且具有不同属性，这些属性通常存储在元数据中，且铸造后不可篡改。</div>
                </div>
                <div class="li">
                    <h1>可证明的稀缺性</h1>
                    <div class="text">数字藏品铸造数量可通过公共区块链网络验证，数量固定，永恒不变，具有可证明性。</div>
                </div>
                <div class="li">
                    <h1>不可分割性</h1>
                    <div class="text">每个数字藏品都是一个独立的个体，无法拆分，因此不能购买或寄售数字藏品的一部分，因此具有不可分割性。</div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="title">数字藏品的优势</div>
            <div class="ul">
                <div class="li">
                    <img src="@/image/pic-home-1.png" alt="">
                    <h1>1、版权确权及溯源</h1>
                    <div class="text">通过区块链技术来解决数字艺术品版权和溯源的问题，通过智能合约与业务应用层内实现逻辑处理和数据整合，让版权归属与收入分配的透明度达到新的台阶。</div>
                </div>
                <div class="li">
                    <img src="@/image/pic-home-2.png" alt="">

                    <h1>2、为行业降本增效</h1>
                    <div class="text">数字藏品铸造数量可通过公共区块链网络验证，数量固定，永恒不变，具有可证明性。</div>
                </div>
                <div class="li">
                    <img src="@/image/pic-home-3.png" alt="">

                    <h1>3、透明式版权保护</h1>
                    <div class="text">每个数字藏品都是一个独立的个体，无法拆分，因此不能购买或寄售数字藏品的一部分，因此具有不可分割性。</div>
                </div>
                <div class="li">
                    <img src="@/image/pic-home-4.png" alt="">

                    <h1>4、强大的技术支撑</h1>
                    <div class="text">每个数字藏品都是一个独立的个体，无法拆分，因此不能购买或寄售数字藏品的一部分，因此具有不可分割性。</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {

        }
    }
}

</script>
<style  lang="less" scoped>
* {
    margin: 0%;
    padding: 0%;
}

.instructorNft {
    
    width: 100%;
    color: #fff;

    .title-what {
        width: 100%;
        padding: 50px 20px 50px 20px;
        box-sizing: border-box;
        background: rgb(41, 40, 40);
        color: #fff;

        h1 {
            margin-bottom: 50px;
        }

        .pre {
            position: relative;
            left: 15%;
            width: 70%;
            text-align: left;
        }
    }

    .body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50px 20px 50px 20px;
        box-sizing: border-box;
        width: 100%;
        background: #fff;
        color: black;

        .title {
            position: relative;
            width: 250px;
            font-size: 28px;
            font-weight: 700;
        }

        .title:before {
            content: "";
            position: absolute;
            top: 48%;
            left: -40%;
            width: 100px;
            height: 3px;
            background: #0396FF;
        }

        .title::after {
            content: "";
            position: absolute;
            top: 48%;
            right: -40%;
            width: 100px;
            height: 3px;
            background: #0396FF;
        }

        .ul {
            position: relative;
            display: flex;
            justify-content: space-between;
            width: 900px;
            height: 150px;
            margin-top: 50px;

            .li {
                position: relative;
                width: 30%;
                height: 100%;
                border-radius: 20px;
                box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.54);
                background-image: linear-gradient(135deg, #ABDCFF 10%, #0396FF 100%);
                text-indent: 0%;
                h1 {
                    // font-size: 1.5vw;
                    font-size: 18px;
                    padding: 15px 15px 5px 15px;
                    box-sizing: border-box;
                }

                .text {
                    font-size: 14px;
                    text-align: left;
                    padding: 15px;
                    box-sizing: border-box;
                    color: rgb(84, 78, 78);

                }
            }
        }
    }

    .footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50px 20px 50px 20px;
        width: 100%;
        background: #fff;
        color: black;
        box-sizing: border-box;

        .title {
            position: relative;
            width: 250px;
            font-size: 28px;
            font-weight: 700;
        }
        .title:before {
            content: "";
            position: absolute;
            top: 48%;
            left: -40%;
            width: 100px;
            height: 3px;
            background: #0396FF;
        }

        .title::after {
            content: "";
            position: absolute;
            top: 48%;
            right: -40%;
            width: 100px;
            height: 3px;
            background: #0396FF;
        }

        .ul {
            position: relative;
            display: flex;
            justify-content: space-between;
            width: 900px;
            // height: 200px;
            margin-top: 50px;

            .li {
                position: relative;
                width: 25%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 40%;
                }

                h1 {
                    // font-size: 1.5vw;
                    font-size: 18px;
                    // padding: 15px 15px 5px 15px;
                    box-sizing: border-box;
                }

                .text {
                    font-size: 14px;
                    text-align: left;
                    padding: 40px;
                    padding-top: 10px;
                    box-sizing: border-box;
                    color: rgb(134, 129, 129);

                }
            }
        }
    }

}
</style>